<div class="favorite-wrap" id="postWrap">
    <div class="favorite-wrap__inner" id="favoritePost">

    </div>

    <div class="wrap-footer">
        <div class="wrap-footer-label" id="postViewMore"><span>View More</span></div>
    </div>

</div>

<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/time.js"></script>
<script type="module">
    import {getGridList, openDetail, collectAction} from "/static/js/common.js"


    const postWrap = document.getElementById('postWrap')
    const postParams = {
        pageSize: 12,
        page: 1
    }
    const taggerProductParmas = {
        pageSize: 6,
        page: 1
    }

    init()
    function init(){
        getPostList()
        initPostView()
    }
    function initPostView(){
        const viewMoreEle = document.getElementById('postViewMore')
        viewMoreEle.addEventListener('click', throttle(() => {
            postParams.page ++
            getPostList()
        },1000))
    }

    function getPostList(){
        const footer = postWrap.querySelector('.wrap-footer-label')
        getGridList({
            loadingElement: postWrap,
            url: '/ins/fa/media',
            params: postParams,
            listWrap: postWrap.querySelector('.favorite-wrap__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<div class="favorite-item">' +
                    '<div class="top">' +
                    '<div class="avatar">' +
                    '<img class="favorite-post-avatar" src="'+ getImage(item.displayUrl,IMAGE_TYPE.MEDIA, IMAGE_SIZE.SMALL) +'" alt="'+ item.id + '">'
                if (item.isVideo){
                    str += '<div class="favorite-post-icon">' +
                        '<i class="iconfont iconMultiPhoto-16px"></i>' +
                        '</div>'
                }
                if (item.isSponsored){
                    str += '<div class="favorite-post-mask">' +
                        'Sponsored' +
                        '</div>'
                }
                str += '</div>' +
                    '<div class="user-info">' +
                    '<div class="title">' +
                    '<div class="title__inner favorite-inner">' + item.caption + '</div>' +
                    '</div>' +
                    '<div class="title_bottom">' +
                    '<div class="post-date">'+ formatTime(+item.takenTime, 'MM-DD-YYYY') +' UTC</div>'
                if (item.score >= 90) {
                    str += '<span class="gd-score red">'
                } else if (item.score < 90 && item.score >= 80) {
                    str += '<span class="gd-score orange">'
                } else if (item.score < 80 && item.score >= 70) {
                    str += '<span class="gd-score green">'
                } else {
                    str += '<span class="gd-score gray">'
                }
                str  += '<i class="iconfont iconhuo"></i>' + numFormat(+item.score) +
                    '</span>' +
                    '</div>' +
                    '</div>' +
                    '<div class="gd-popover"'
                if (!gugeeGobal.isMobile) {
                    str += ' content="Remove from Favorite"'
                }
                str += '>' +
                    '<div class="favorite-icon is-collect" data-id="' + item.id + '" data-fid="' + item.fid + '" data-shortcode="'+ item.shortcode +'">' +
                    '<i class="iconfont iconquxiaoshoucang33"></i>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="bottom">' +
                    '<div class="data-item">' +
                    '<div class="label">Views</div>' +
                    '<div class="num">' + numFormat(+item.views) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Likes</div>' +
                    '<div class="num">' + numFormat(+item.likes) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">Reviews</div>' +
                    '<div class="num">' + numFormat(+item.reviews) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="label">ER</div>' +
                    '<div class="num">' + numFormat(+item.er*100) + '%</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                return str
            },
            otherEvent: () => {
                initPopover()
                postWrap.querySelectorAll('.favorite-icon').forEach(item => {
                   item.addEventListener('click', e => {
                       collectAction({
                           element: item,
                           url: '/ins/fa/media',
                           collectKey: 'mid'
                       })
                       e.stopPropagation()
                   })
                })
                postWrap.querySelectorAll('.favorite-item').forEach(item => {
                    item.addEventListener('click', e => {
                        const id = item.querySelector('.favorite-icon').getAttribute('data-id')
                        const shrotcode = item.querySelector('.favorite-icon').getAttribute('data-shortcode')
                        openDetail(id, shrotcode)
                    })
                })
            }
        })
    }


</script>